<template>
  <!--banner轮播-->
  <div class="swiper-container swiper-carousels" id="mySwiper1">
    <div class="swiper-wrapper">
      <!-- 循环遍历服务器返回的数据 -->
      <div class="swiper-slide" v-for="(val, index) in banner" :key="val.id">
        <a :href="val.url">
          <div class="banner-img" :style="{backgroundImage:`url(${val.src})`}"></div>
        </a>
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <!-- <div class="swiper-pagination"></div> -->

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev swiper-button button-prev"></div>
    <div class="swiper-button-next swiper-button button-next"></div>
    <div class="fixed-gif">
      <img class="img-respon" src="/images/home/icon-38.gif" alt="gif">
    </div>
  </div>
  <div class="container flex-center layout-flex prefecture">
    <div class="el-row">
      <div class="el-col el-col-14">
        <div class="layout-flex">
          <a href="javascript:;" @click="searchGet('MOMENTUM')">
            <img src="/images/home/momentum专区.jpg" alt="momentum专区" class="el-image__inner">
          </a>
        </div>
      </div>
      <div class="el-col el-col-10">
        <a href="javascript:;" @click="searchGet('高保真')"><img src="/images/home/高保真-2.jpg" alt="高保真"></a>
        <a href="javascript:;" @click="searchGet('IE')"><img src="/images/home/IE专区.jpg" alt="IE专区"></a>
      </div>
    </div>
  </div>
  <div class="container layout-flex layout-margin flex-center">
    <div class="el-row">
      <div class="el-col el-col-10">
        <div class="nav-other">
          <div class="el-image img-respon">
            <img class="el-image__inner" src="/images/home/活动专区.jpg" alt="活动专区">
          </div>
          <div class="nav-abs fz20px">
            <div class="nav-item" :plain="true" @click="open" v-for="val in navItem" :key="val.id">
              <img class="img-respon" :src="val.imgUrl" :alt="val.title">
              <span>{{ val.title }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="el-col el-col-14">
        <div class="layout-flex">
          <a href="#/product?id=3">
            <img class="el-image__inner" src="/images/home/1110.jpg" alt="新品上市">
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="container layout-flex flex-center">
    <a href="#/classify?classify_id=2">
      <img class="el-image__inner" src="/images/home/hd.jpg" alt="杨洋">
    </a>
  </div>
  <div class="container">
    <h3 class="title-h3">- 热卖爆款 -</h3>
    <div class="layout-padding el-row is-justify-center el-row--flex">
      <div class="el-col el-col-1"></div>
      <div class="el-col el-col-9">
        <a href="#/product?id=4" class="link-img">
          <div class="el-image img-respon">
            <img class="el-image__inner" src="/images/home/M3-PCAD.jpg" alt="M3-PCAD">
          </div>
        </a>
      </div>
      <div class="el-col el-col-13">
        <div class="goods-container">
          <div class="goods-box">
            <a :href="val.url" class="goods-item" v-for="val in goodsItem1" :key="val.id">
              <div class="goods-img">
                <div class="el-image">
                  <img class="el-image__inner" :src="val.src" :alt="val.title">
                </div>
              </div>
              <div class="goods-info">
                <p class="name">{{ val.title }}</p>
                <div class="goods-price layout-flex-center">
                  <span class="unit">¥</span>
                  <span class="price">{{ val.price }}</span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="el-col el-col-1"></div>
    </div>
  </div>
  <div class="container">
    <h3 class="title-h3">- 外出便携 -</h3>
    <div class="layout-padding el-row is-justify-center el-row--flex">
      <div class="el-col el-col-1"></div>
      <div class="el-col el-col-13">
        <div class="goods-container">
          <div class="goods-box">
            <a :href="val.url" class="goods-item" v-for="val in goodsItem2" :key="val.id">
              <div class="goods-img">
                <div class="el-image">
                  <img class="el-image__inner" :src="val.src" :alt="val.title">
                </div>
              </div>
              <div class="goods-info">
                <p class="name">{{ val.title }}</p>
                <div class="goods-price layout-flex-center">
                  <span class="unit">¥</span>
                  <span class="price">{{ val.price }}</span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="el-col el-col-9">
        <a href="#/product?id=66" class="link-img">
          <div class="el-image img-respon">
            <img class="el-image__inner" src="/images/home/cx350广告位.jpg" alt="M3-PCAD">
          </div>
        </a>
      </div>
      <div class="el-col el-col-1"></div>
    </div>
  </div>
  <div class="container">
    <h3 class="title-h3">- 专属配件 -</h3>
    <div class="el-row">
      <div class="parts-content el-col el-col-22">
        <div class="swiper-container swiper-carousels carousel" id="mySwiper2">
          <div class="swiper-wrapper">
            <!-- 循环遍历服务器返回的数据 -->
            <div class="swiper-slide carousel-item" v-for="val in carousel" :key="val.id" >
              <a :href="val.url">
                <div class="item-lf">
                  <div class="item-lf-abs">
                    <p class="trade-name">{{ val.title }}</p>
                    <div class="btn-buy">
                      <div class="text">官方指导价:</div>
                      <div class="price">
                        <span class="symbol">￥</span>
                        <span>{{ val.price }}</span>
                    </div>
                    </div>
                  </div>
                </div>
                <div class="item-rt">
                  <div class="auto-height">
                    <img class="img-respon" :src="val.src" :alt="val.title">
                  </div>
                </div>
              </a>
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <!-- <div class="swiper-pagination"></div> -->

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="container layout-flex flex-column flex-center">
    <h3 class="title-h3">- 特色产品 -</h3>
    <div class="el-image video-poster" @click="visible = true">
      <img class="el-image__inner" src="/images/home/video-bg.jpg" alt="特色产品">
    </div>
  </div>
  <div class="container container-news">
    <div class="el-divider el-divider--horizontal">
      <div class="el-divider__text is-left">新闻动态</div>
    </div>
    <div class="news">
      <a href="/" class="news-item" v-for="val in newsItem" :key="val.id">
        <div class="el-image news-img">
          <img class="el-image__inner" :src="val.imgUrl" :alt="val.title">
        </div>
        <p class="news-title">{{ val.title }}</p>
      </a>
    </div>
  </div>
  <el-dialog v-model="visible" custom-class="dialog-video" width="960px" :lock-scroll="false" :append-to-body="true" :show-close="false">
    <video id="video" controls="controls" autoplay="autoplay">
      <source src="@/assets/video/index_video.mp4" type="video/mp4">
    </video>
  </el-dialog>
</template>

<script>
import Swiper from 'swiper';
import {ref, watch, onMounted, nextTick, reactive, getCurrentInstance} from 'vue';
import 'swiper/css/swiper.css';
import { ElMessage } from 'element-plus';
import store from "../../../store";
import { useRouter,useRoute } from 'vue-router';

export default {
  setup(){
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    // 功能未开发
    const open = () => {
      ElMessage({
        message: '敬请期待',
        grouping: true,
        offset: 100
      });
    }
    // 视频显示与隐藏
    const visible = ref(false);
    // 视频播放与暂停
    watch(visible,(newV,oldV)=>{
      nextTick(()=>{
        let video = document.getElementById('video');
        if (newV){
          video.play();
        }else {
          video.pause();
        }
      })
    })

    // 专区
    let searchGet = (text)=>{
      proxy.$get('/api/header/search',{search:text})
          .then((date)=>{
            if (date.length === 0){
              date = 0;
            }
            store.commit('search',date);
            // store.commit('searchFlag',date);
          })
      router.push("/classify");
    }

    return {
      visible,
      open,
      searchGet
    }
  },
  name: "content",
  mounted() {
    // 请求页面数据
    this.$get("/api/data/index").then((data)=>{
      let { banner,carousel,goodsItem1,goodsItem2 } = data;
      this.banner = banner;
      this.goodsItem1 = goodsItem1;
      this.goodsItem2 = goodsItem2;
      this.carousel = carousel;
    });
  },
  data(){
    return {
      banner: [],
      goodsItem1: [],
      goodsItem2: [],
      carousel: [],
      navItem: [
        {
          id: 1,
          title: '免费定制',
          imgUrl: '/images/home/定制.png',
        },
        {
          id: 2,
          title: '积分加购',
          imgUrl: '/images/home/积分.png'
        },
        {
          id: 3,
          title: '新品试用',
          imgUrl: '/images/home/试用.png'
        },
      ],
      newsItem: [
        {
          id: 1,
          title: 'IE 300：只为你挑剔的耳朵',
          imgUrl: '/images/home/news1.jpg',
        },
        {
          id: 2,
          title: '声音玩家进阶指南',
          imgUrl: '/images/home/news2.png',
        },
        {
          id: 3,
          title: '声之艺术，触耳可及',
          imgUrl: '/images/home/news3.jpg',
        },
      ]
    }
  },
  watch: {
    // 淡入轮播
    banner: {
      handler(newBanner, oldBanner) {
        //只能监听到轮播图数据已经有了，但是v-for动态渲染结构我们还是没有办法确定的，因此还是需要用nextTick
        //nextTick:  在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
        this.$nextTick(() => {
          var mySwiper1 = new Swiper('#mySwiper1', {
            loop: true, // 循环模式选项
            effect: "fade",
            speed: 1000, // 切换速度
            // 如果需要分页器
            /*pagination: {
              el: '.swiper-pagination',
              //点击小球的时候也切换图片
              clickable: true,
            },*/
            // 自由切换
            autoplay: {
              delay: 3000,//自动切换时间
              stopOnLastSlide: false,//与loop有关，设置为true，loop失效
              disableOnInteraction: false,//用户操作之后，是否禁止自动切换（默认true禁止/设置false允许）
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            // 如果需要滚动条
            scrollbar: {
              el: '.swiper-scrollbar',
            }
          })
          // 鼠标移入轮播图范围，执行的函数
          mySwiper1.el.onmouseover = ()=>{
            //鼠标进入，停止自动切换
            mySwiper1.autoplay.stop();
          }

          // 鼠标移出轮播图范围，执行的函数
          mySwiper1.el.onmouseout = ()=>{
            //鼠标移出，开始自动切换
            mySwiper1.autoplay.start();
          }
        })
      },
      //立即监听：不管你数据有没有变化，我上来立即监听一次
      immediate: true,
      deep: true         // 深度监听 数组和对象
    },
    // 滚动轮播
    carousel: {
      handler(newBanner, oldBanner) {
        this.$nextTick(() => {
          var mySwiper2 = new Swiper('#mySwiper2', {
            loop: true, // 循环模式选项
            speed: 1500, // 切换速度
            // 自由切换
            autoplay: {
              delay: 3000, // 自动切换时间
              stopOnLastSlide: false,//与loop有关，设置为true，loop失效
              disableOnInteraction: false,//用户操作之后，是否禁止自动切换（默认true禁止/设置false允许）
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            // 如果需要滚动条
            scrollbar: {
              el: '.swiper-scrollbar',
            },
            slidesPerView: '2' // 一页可见数
          })
          // 鼠标移入轮播图范围，执行的函数
          mySwiper2.el.onmouseover = ()=>{
            //鼠标进入，停止自动切换
            mySwiper2.autoplay.stop();
          }

          // 鼠标移出轮播图范围，执行的函数
          mySwiper2.el.onmouseout = ()=>{
            //鼠标移出，开始自动切换
            mySwiper2.autoplay.start();
          }
        })
      },
      //立即监听：不管你数据有没有变化，我上来立即监听一次
      immediate: true,
      deep: true         // 深度监听 数组和对象
    },
  }
}
</script>

<style lang="less" scoped>
a:active, a:hover, a:link, a:visited {
  text-decoration: none!important;
}
.swiper-carousels {
  margin-bottom: 34px;
  .banner-img {
    width: 100%;
    padding-top: 37.8%;
    background-size: 100% 100%;
  }
  .fixed-gif {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translate3d(-50%,0,0);
    z-index: 999;
    width: 26px;
    .img-respon {
      width: 100%;
    }
  }
}
.swiper-button {
  width: 57px;
  height: 162px;
  background: #020000;
  opacity: .22;
  position: absolute;
  top: 43%;
  z-index: 99;
  color: #fff;
}
.button-prev {
  left: 80px;
  &:after {
    font-size: 30px;
  }
}
.button-next {
  right: 80px;
  &:after {
    font-size: 30px;
  }
}

.flex-center {
  justify-content: center;
}
.layout-flex {
  display: flex;
  align-items: center;
}
.flex-column {
  flex-direction: column;
}
.prefecture {
  margin-bottom: .9%;
  .layout-flex{
    &:after {
      content: '';
      width: 20px;
    }
  }
  a {
    display: block;
    font-size: 0;
  }
}
.container img {
  width: 100%;
  transition: all .5s;
}
.el-image__inner {
  vertical-align: top;
}
.layout-margin {
  margin-bottom: 34px;
  .layout-flex {
    &:before {
      content: '';
      width: 20px;
    }
  }
  .nav-other {
    position: relative;
    .nav-abs {
      position: absolute;
      display: flex;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      .nav-item {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: hsla(0,0%,100%,.6);
        cursor: pointer;
        .img-respon {
          width: 52px;
          margin-bottom: 24px;
        }
      }
    }
  }
}
.fz20px {
  font-size: 20px;
}
.container .title-h3 {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #000;
  font-weight: bold;
}
.layout-padding {
  .link-img{
    height: 100%;
    .img-respon {
      width: 100%;
      height: 100%;
    }
    &:hover .el-image__inner {
      transform: scale(1.1);
    }
  }
  .goods-container {
    position: relative;
    height: 100%;
    background: #fff;
    .goods-box {
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      position: absolute;
      padding: 0 40px;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      .goods-item {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .goods-img {
          width: 45%;
          .el-image {
            width: 100%;
            height: 100%;
          }
        }
        .goods-info {
          text-align: center;
          .name {
            margin-bottom: 3px;
            font-size: 16px;
            color: #333333;
          }

        }
      }
    }
  }
}
.goods-price {
  align-items: baseline;
  color: #0096d6;
  font-weight: 700;
  .unit {
    margin-right: 4px;
    cursor: default;
  }
  .price {
    font-size: 20px;
  }
}
.layout-flex-center {
  display: flex;
  justify-content: center;
}
.parts-content {
  float: none;
  margin: 0 auto;
}
.carousel .carousel-item {
  display: flex;
  background: #fff;
  width: 50%;
  a {
    display: flex;
    flex: 1;
    .item-lf {
      position: relative;
      width: 45.46%;
      font-size: 16px;
      .item-lf-abs {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        flex-direction: column;
        .trade-name {
          font-size: 16px;
          margin-bottom: 3px;
          width: 120px;
        }
        .btn-buy {
          margin-top: 30px;
          display: flex;
          justify-content: space-between;
          width: 185px;
          height: 39px;
          border: 1px solid #0096d6;
          border-radius: 20px;
          font-size: 12px;
          box-sizing: border-box;
          .text,.price {
            display: flex;
            align-items: center;
            font-size: 16px;
          }
          .text {
            margin-top: -1px;
            margin-left: 10px;
          }
          .price {
            font-size: 24px;
            font-weight: 700;
            margin-top: -1px;
            margin-right: -1px;
            padding-right: 16px;
            padding-left: 5px;
            height: 39px;
            text-align: right;
            color: #fff;
            width: 82px;
            background: #0096d6;
            border-radius: 0 20px 20px 0;
            box-sizing: border-box;
          }
          .symbol {
            margin-top: 5px;
            font-size: 12px;
          }
        }
      }
    }
    .item-rt {
      position: relative;
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      background: #e2e2e2;
      .auto-height {
        padding-top: 100%;
      }
      .img-respon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 60%;
      }
    }
  }
}
.video-poster {
  cursor: pointer;
}
.container-news {
  position: relative;
  .el-divider {
    width: auto;
    margin: 46px 0 48px 6px;
    background-color: #333;
    .is-left {
      font-weight: 700;
      background: #f4f4f4;
      font-size: 30px;
      padding: 0 10px;
      left: 60px;
    }
  }
  .news {
    padding: 0 80px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
    .news-item {
      background: #fff;
      transition: all .2s linear;
      cursor: pointer;
      flex: 1;
      border-radius: 4px;
      width: 32%;
      &:nth-child(2) {
        margin: 0 60px;
      }
      &:hover {
        z-index: 2;
        box-shadow: 0 15px 30px rgba(0,0,0,.1);
        transform: translate3d(0,-2px,0);
      }
      .el-image__inner {
        border-radius: 4px 4px 0 0;
      }
      .news-title {
        font-size: 16px;
        padding: 20px 21px 34px;
        max-width: 546px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333333;
      }
    }
  }
}

</style>

<style>
.dialog-video .el-dialog__body {
  padding: 0;
  font-size: 0;
}
.dialog-video .el-dialog__header {
  display: none;
}
</style>